<template>
  <div class="test-request-page">
    <h1>HTTP 请求测试页面</h1>

    <div class="test-section">
      <h2>1. 测试 GET 请求</h2>
      <button @click="testGet" :disabled="loading">测试 GET 请求</button>
      <div v-if="getResult" class="result-box">
        <h3>响应结果:</h3>
        <p><strong>状态码:</strong> {{ getResult.status }}</p>
        <p><strong>响应数据:</strong></p>
        <pre>{{ JSON.stringify(getResult.body, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h2>2. 测试 POST 请求</h2>
      <button @click="testPost" :disabled="loading">测试 POST 请求</button>
      <div v-if="postResult" class="result-box">
        <h3>响应结果:</h3>
        <p><strong>状态码:</strong> {{ postResult.status }}</p>
        <p><strong>响应数据:</strong></p>
        <pre>{{ JSON.stringify(postResult.body, null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h2>3. 自定义请求测试</h2>
      <div class="form-group">
        <label>请求方法:</label>
        <select v-model="customMethod">
          <option value="GET">GET</option>
          <option value="POST">POST</option>
          <option value="PUT">PUT</option>
          <option value="DELETE">DELETE</option>
        </select>
      </div>

      <div class="form-group">
        <label>URL:</label>
        <input
          v-model="customUrl"
          placeholder="https://api.example.com/endpoint"
        />
      </div>

      <div class="form-group">
        <label>查询参数 (JSON):</label>
        <textarea
          v-model="customParams"
          placeholder='{"key": "value"}'
          rows="3"
        ></textarea>
      </div>

      <div class="form-group">
        <label>请求体 (JSON):</label>
        <textarea
          v-model="customBody"
          placeholder='{"name": "test"}'
          rows="5"
        ></textarea>
      </div>

      <button @click="testCustom" :disabled="loading">发送自定义请求</button>

      <div v-if="customResult" class="result-box">
        <h3>响应结果:</h3>
        <p><strong>状态码:</strong> {{ customResult.status }}</p>
        <p><strong>响应头:</strong></p>
        <pre>{{ JSON.stringify(customResult.headers, null, 2) }}</pre>
        <p><strong>响应数据:</strong></p>
        <pre>{{ customResult.text }}</pre>
      </div>
    </div>

    <div v-if="error" class="error-box">
      <h3>错误信息:</h3>
      <p>{{ error }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { get, post, request } from "@/utils/request";
import type { ResponseData, HttpMethod } from "@/utils/request";

const loading = ref(false);
const error = ref("");
const getResult = ref<ResponseData | null>(null);
const postResult = ref<ResponseData | null>(null);
const customResult = ref<ResponseData | null>(null);

// 自定义请求的表单数据
const customMethod = ref<HttpMethod>("GET");
const customUrl = ref("https://jsonplaceholder.typicode.com/users/1");
const customParams = ref("");
const customBody = ref("");

/**
 * 测试 GET 请求
 * 使用 JSONPlaceholder 公共测试 API
 */
async function testGet() {
  loading.value = true;
  error.value = "";
  getResult.value = null;

  try {
    const response = await get("https://jsonplaceholder.typicode.com/users", {
      _limit: "5", // 限制返回 5 条数据
    });
    getResult.value = response;
    console.log("GET 请求成功:", response);
  } catch (err: any) {
    error.value = `GET 请求失败: ${err.message || err}`;
    console.error("GET 请求失败:", err);
  } finally {
    loading.value = false;
  }
}

/**
 * 测试 POST 请求
 * 使用 JSONPlaceholder 公共测试 API
 */
async function testPost() {
  loading.value = true;
  error.value = "";
  postResult.value = null;

  try {
    const response = await post("https://jsonplaceholder.typicode.com/posts", {
      title: "Nexus Kit 测试",
      body: "这是通过 Rust 后端发起的 POST 请求",
      userId: 1,
    });
    postResult.value = response;
    console.log("POST 请求成功:", response);
  } catch (err: any) {
    error.value = `POST 请求失败: ${err.message || err}`;
    console.error("POST 请求失败:", err);
  } finally {
    loading.value = false;
  }
}

/**
 * 测试自定义请求
 */
async function testCustom() {
  loading.value = true;
  error.value = "";
  customResult.value = null;

  try {
    // 解析查询参数
    let params: Record<string, string> | undefined;
    if (customParams.value.trim()) {
      try {
        params = JSON.parse(customParams.value);
      } catch (e) {
        throw new Error("查询参数 JSON 格式错误");
      }
    }

    // 解析请求体
    let body: any;
    if (customBody.value.trim()) {
      try {
        body = JSON.parse(customBody.value);
      } catch (e) {
        throw new Error("请求体 JSON 格式错误");
      }
    }

    // 发送请求
    const response = await request({
      method: customMethod.value,
      url: customUrl.value,
      params,
      body,
    });

    customResult.value = response;
    console.log("自定义请求成功:", response);
  } catch (err: any) {
    error.value = `请求失败: ${err.message || err}`;
    console.error("请求失败:", err);
  } finally {
    loading.value = false;
  }
}
</script>

<style scoped>
.test-request-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  color: #333;
  margin-bottom: 30px;
}

.test-section {
  background: #f5f5f5;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 8px;
}

h2 {
  color: #555;
  margin-bottom: 15px;
  font-size: 18px;
}

h3 {
  color: #666;
  margin-bottom: 10px;
  font-size: 16px;
}

button {
  background: #409eff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover:not(:disabled) {
  background: #66b1ff;
}

button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.result-box {
  margin-top: 20px;
  background: white;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.result-box pre {
  background: #f9f9f9;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
}

.error-box {
  background: #fee;
  border: 1px solid #fcc;
  padding: 15px;
  border-radius: 4px;
  margin-top: 20px;
}

.error-box h3 {
  color: #c00;
  margin-bottom: 10px;
}

.error-box p {
  color: #c00;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}

.form-group select {
  cursor: pointer;
}

.form-group textarea {
  font-family: monospace;
  resize: vertical;
}
</style>
